<template>
    <div>
        <films-swiper></films-swiper><!-- 轮播 -->
        <div class='sticky'>
            <router-link to="/films/nowplaying" custom v-slot="{navigate,isActive}">
                <div @click="navigate" :class="isActive?'lth':''" class="headbar">
                    <span :class="isActive?'rightthis':''">正在热映</span>
                </div>
            </router-link>
            <router-link to="/films/comingsoon" custom v-slot="{navigate,isActive}">
                <div @click="navigate" :class="isActive?'lth':''" class="headbar">
                    <span :class="isActive?'rightthis':''">即将上映</span>
                </div>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import tabbar from '@/Components/apps/Tabbar.vue'
import FilmsSwiper from '@/Components/Films/FilmsSwiper.vue'
export default {
    components: { 
        FilmsSwiper,
        tabbar
    },
}
</script>

<style scoped>
.lth{
  color: red;
}
.rightthis{
    border-bottom: 2px solid red;
}
.headbar{
    float: left;
    width: 50%;
    text-align: center;
    font-size: 20px;
    background: white;
}
.sticky{
    position: sticky;
    top: 0px;
    z-index: 100;
}
</style>